<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="layui/css/layui.css" />
		<style>
			.checkbox-no-icon i.layui-icon {
				display: none !important;
			}
			
			.checkbox-no-icon .layui-form-checkbox {
				padding-right: 0;
			}
			
			.radio-no-icon {
				display: table;/* 调教webkit*/
				word-spacing: -1em;				
				border-radius: 2px;
				min-height: 30px;
				border: 1px solid #d2d2d2;
			}
			
			.radio-no-icon i.layui-icon {
				display: none !important;
			}
			
			.radio-no-icon .layui-form-radio {
				position: relative;
				height: 30px;
				line-height: 30px;
				margin: 0;
				padding-right: 0;
				
				font-size: 0;
				transition: .1s linear;
				box-sizing: border-box!important;
			}
			
			.radio-no-icon .layui-form-radio span {
				padding: 0 10px;
				font-size: 14px;
				background-color: #d2d2d2;
				color: #fff;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
			.radio-no-icon .layui-form-radioed span {
				background: #5FB878;
			}
		</style>
	</head>

	<body>
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">输入框</label>
				<div class="layui-input-block">
					<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">选择框</label>
				<div class="layui-input-block">
					<select name="city" lay-verify="required">
						<option value=""></option>
						<option value="0">北京</option>
						<option value="1">上海</option>
						<option value="2">广州</option>
						<option value="3">深圳</option>
						<option value="4">杭州</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">复选框</label>
				<div class="layui-input-block checkbox-no-icon">
					<input type="checkbox" name="like[write]" title="写作">
					<input type="checkbox" name="like[read]" title="阅读" checked>
					<input type="checkbox" name="like[dai]" title="发呆">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">复选框</label>
				<div class="layui-input-block">
					<input type="checkbox" name="like1[write]" title="写作">
					<input type="checkbox" name="like1[read]" title="阅读" checked>
					<input type="checkbox" name="like1[dai]" title="发呆">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">单选框</label>
				<div class="layui-input-block radio-no-icon">
					<input type="radio" name="sex1" value="男" title="男">
					<input type="radio" name="sex1" value="女" title="女" checked>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">单选框</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男">
					<input type="radio" name="sex" value="女" title="女" checked>
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">文本域</label>
				<div class="layui-input-block">
					<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>

		<script type="text/javascript" src="layui/layui.js"></script>
		<script>
			//Demo
			layui.use('form', function() {
				var form = layui.form();

				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
		</script>

	</body>

</html>